<template>
  <div class="home" style="margin-top: -50px">
    <div class="bannerList">
      <template>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, index) in bannerList" :key="index">
            <div><img :src="imageWebUrl + item.photo" alt="" /></div>
            <img
              :src="imageWebUrl + item.photo"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </swiper-slide>
          <!-- <swiper-slide>
              <div><img src="@/assets/image/employment/homeBanner.png" alt="" /></div>
              <img src="@/assets/image/employment/homeBanner.png" alt="" />
          </swiper-slide>
          <swiper-slide>
              <div><img src="@/assets/image/employment/homeBanner1.png" alt="" /></div>
              <img src="@/assets/image/employment/homeBanner1.png" alt="" />
          </swiper-slide>
          <swiper-slide>
              <div><img src="@/assets/image/employment/homeBanner.png" alt="" /></div>
              <img src="@/assets/image/employment/homeBanner.png" alt="" />
          </swiper-slide> -->
        </swiper>
        <div class="swiper-pagination"></div>
      </template>
    </div>
    <div class="announcement" v-show="naticeList.length">
      <div class="notice">
        <div class="msg"><div>通/知/公/告</div></div>
        <a-carousel :autoplay="true" :dots="false" :dot-position="dotPosition">
          <div v-for="(item, index) in naticeList" :key="index">
            <p @click="goNewsDetail(item.newsNo, '通知公告')">
              {{ item.title }}
            </p>
          </div>
        </a-carousel>
        <div class="mall" @click="$router.push('/noticeList?type=通知公告')">
          <p>更多</p>
          <a-icon type="right" />
          <!-- <img src="@/assets/image/employment/mall.png" alt=""> -->
        </div>
      </div>
    </div>
    <div class="content">
      <div class="leftcontent">
        <template>
          <a-tabs @change="tabChange">
            <a-tab-pane key="1" tab="新闻资讯">
              <ul class="messages">
                <li
                  class="listDiv"
                  v-for="(item, index) in newsList"
                  :key="index"
                  @click="goNewsDetail(item.newsNo, '新闻资讯')"
                >
                  <img
                    v-if="item.cover"
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                    class="leftimg"
                  />
                  <div class="rightCont">
                    <div class="top">
                      <div class="titlenav" v-if="item.sortName">
                        <div>{{ item.sortName }}</div>
                      </div>
                      <p class="messTitle">{{ item.title }}</p>
                    </div>
                    <div class="navmsg">
                      <p>发布：{{ item.publishTime }}</p>
                      <p>阅读量：{{ item.browseNum }}</p>
                      <p>来源：{{ item.source }}</p>
                    </div>
                    <p class="contents">{{ item.intro }}</p>
                  </div>
                </li>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="newsList.length < 1 && flag"
                />
              </ul>
            </a-tab-pane>
            <a-tab-pane key="5" tab="政策解读">
              <ul class="messages">
                <li
                  class="listDiv"
                  v-for="(item, index) in newsList"
                  :key="index"
                  @click="goNewsDetail(item.newsNo, '政策解读')"
                >
                  <img
                    v-if="item.cover"
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                    class="leftimg"
                  />
                  <div class="rightCont">
                    <div class="top">
                      <!-- <div class="titlenav" v-if="item.sortName">
                        <div>{{ item.sortName }}</div>
                      </div> -->
                      <p class="messTitle">{{ item.title }}</p>
                    </div>
                    <div class="navmsg">
                      <p>发布：{{ item.publishTime }}</p>
                      <p>阅读量：{{ item.browseNum }}</p>
                      <p>来源：{{ item.source }}</p>
                    </div>
                    <p class="contents">{{ item.intro }}</p>
                  </div>
                </li>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="newsList.length < 1 && flag"
                />
              </ul>
            </a-tab-pane>
            <a-tab-pane key="2" tab="创业就业">
              <ul class="messages">
                <li
                  class="listDiv"
                  v-for="(item, index) in newsList"
                  :key="index"
                  @click="goNewsDetail(item.newsNo, '政策')"
                >
                  <img
                    v-if="item.cover"
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                    class="leftimg"
                  />
                  <div class="rightCont">
                    <div class="top">
                      <!-- <div class="titlenav" v-if="item.sortName">
                        <div>{{ item.sortName }}</div>
                      </div> -->
                      <p class="messTitle">{{ item.title }}</p>
                    </div>
                    <div class="navmsg">
                      <p>发布：{{ item.publishTime }}</p>
                      <p>阅读量：{{ item.browseNum }}</p>
                      <p>来源：{{ item.source }}</p>
                    </div>
                    <p class="contents">{{ item.intro }}</p>
                  </div>
                </li>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="newsList.length < 1 && flag"
                />
              </ul>
            </a-tab-pane>
            <a-tab-pane key="3" tab="康复服务">
              <!-- <ul class="titleList">
                <li v-for="(item,index) in SpreadList" :key="index" @click="goDetail(item.homeType == 1,item.sprNo,'康复科普')">
                  <p class="title">{{item.title}}</p>
                  <p class="contenttext" :class="!item.checked ? '' : 'contentactive'" v-html="item.abstracts">
                  </p>
                  <p class="time">{{item.publishDate}}</p>
                  <div v-if="item.homeType == 2 && item.abstracts.length > 104">
                    <div class="show" v-if="!item.checked" @click="show(index)">
                      <p>阅读全文</p>
                      <img src="@/assets/image/employment/bottom.png" alt="" />
                    </div>
                    <div class="show" v-if="item.checked" @click="show(index)">
                      <p>收起</p>
                      <img src="@/assets/image/employment/top.png" alt="" />
                    </div>
                  </div>
                </li> -->
              <ul class="messages">
                <li
                  class="listDiv"
                  v-for="(item, index) in SpreadList"
                  :key="index"
                  @click="goNewsDetail(item.sprNo, '科普')"
                >
                  <img
                    v-if="item.cover"
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                    class="leftimg"
                  />
                  <div class="rightCont">
                    <div class="top">
                      <p class="titlenav" v-if="item.sortName">
                        {{ item.sortName }}
                      </p>
                      <p class="messTitle">{{ item.title }}</p>
                    </div>
                    <div class="navmsg">
                      <p v-show="item.publishTime">
                        发布：{{ item.publishTime }}
                      </p>
                      <p v-show="item.browseNum">
                        阅读量：{{ item.browseNum }}
                      </p>
                      <p v-show="item.source">来源：{{ item.source }}</p>
                    </div>
                    <p class="contents" v-html="item.abstracts"></p>
                  </div>
                </li>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="SpreadList.length < 1 && flag"
                />
              </ul>
              <!-- <a-empty
                    :image="imgUrl"
                    :image-style="{
                    height: '220px',
                    }"
                    style="margin: 0 auto; margin-top: 88px"
                    v-if="SpreadList.length < 1 && flag"
                />
              </ul> -->
            </a-tab-pane>
            <a-tab-pane key="4" tab="生活维权">
              <ul class="titleList">
                <li
                class="listDiv"
                  v-for="(item, index) in SpreadList"
                  :key="index"
                  @click="
                    goDetail(item.homeType == 1, item.lifeSafNo, '案例', '首页')
                  "
                >
                  <p class="title">{{ item.title }}</p>
                  <p
                    class="contenttext"
                    :class="!item.checked ? '' : 'contentactive'"
                    v-html="item.abstracts"
                  ></p>
                  <p class="time">{{ item.publishTime }}</p>
                  <div v-if="item.homeType == 2 && item.abstracts.length > 230">
                    <div class="show" v-if="!item.checked" @click="show(index)">
                      <p>阅读全文</p>
                      <img src="@/assets/image/employment/bottom.png" alt="" />
                    </div>
                    <div class="show" v-if="item.checked" @click="show(index)">
                      <p>收起</p>
                      <img src="@/assets/image/employment/top.png" alt="" />
                    </div>
                  </div>
                </li>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="SpreadList.length < 1 && flag"
                />
              </ul>
            </a-tab-pane>
            <div
              class="mall"
              slot="tabBarExtraContent"
              v-show="SpreadList.length != 0 || newsList.length != 0"
              @click="goMallList"
            >
              <p>更多</p>
              <img src="@/assets/image/employment/mall.png" alt="" />
            </div>
          </a-tabs>
        </template>
      </div>
      <div class="rightcontent">
        <div class="rightTitle haveMall">
          <div class="title">
            <img src="@/assets/image/employment/newsIcon.png" alt="" />
            <p>新闻专栏</p>
          </div>
          <div class="mall" @click="gozhuanlanList(-1)">
            <p>更多</p>
            <a-icon type="right" />
          </div>
        </div>
        <div class="cah listDiv1 listDiv" @click="gozhuanlanList(0)">
          <p class="title">残奥会专栏</p>
          <p class="contents">Column of Paralympics</p>
        </div>
        <div class="zqfc listDiv1 listDiv" @click="gozhuanlanList(1)">
          <p class="title">自强风采专栏</p>
          <p class="contents">Column of self-improvement</p>
        </div>
        <div class="zczg listDiv1 listDiv" @click="gozhuanlanList(2)">
          <p class="title">助残之歌专栏</p>
          <p class="contents">Column of disability assistance</p>
        </div>
        <div class="rightTitle">
          <div class="title">
            <img src="@/assets/image/employment/entrance.png" alt="" />
            <p @click="setCookie">便民入口</p>
          </div>
        </div>
        <div class="convenient">
          <div
            class="list"
            @click="JumpOutside('https://www.cdpf.org.cn/searchUser.html')"
          >
            <div class="inline">
              <img src="@/assets/image/homeImg/findcode.png" alt="" />
              <p class="title">残疾人证查询</p>
              <p class="englishTit">Disability certificate inquiry</p>
              <p class="linkName">中华人民共和国第二代残疾人证查询服务</p>
            </div>
          </div>
          <div
            class="list"
            @click="JumpOutside('https://login.cdpf.org.cn/uams/person.html')"
          >
            <div class="inline">
              <img
                src="@/assets/image/homeImg/certificatehandling.png"
                alt=""
              />
              <p class="title">残疾人证办理</p>
              <p class="englishTit">Disability certificate application</p>
              <p class="linkName">残疾人证在线申请办理</p>
            </div>
          </div>
          <div
            class="list"
            @click="JumpOutside('https://login.cdpf.org.cn/uams/person.html')"
          >
            <div class="inline">
              <img src="@/assets/image/homeImg/education.png" alt="" />
              <p class="title">精准康复</p>
              <p class="englishTit">Precise rehabilitation</p>
              <p class="linkName">精准康复、儿童康复救助在线申请</p>
            </div>
          </div>
          <div
            class="list"
            @click="
              JumpOutside(
                'https://service.cdpf.org.cn//api?method=zclXfxt.complaint.getIndexPage'
              )
            "
          >
            <div class="inline">
              <img src="@/assets/image/homeImg/Onlinecomplaints.png" alt="" />
              <p class="title">网上投诉</p>
              <p class="englishTit">Online complaints</p>
              <p class="linkName">
                残疾人的合法权益受到侵害的，向残疾人组织投诉
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="entrance">
          <div class="list">
            <img src="@/assets/image/employment/icon-one.png" alt="">
            <p>教育培训</p>
          </div>
          <div class="list">
            <img src="@/assets/image/employment/icon-two.png" alt="">
            <p>创业就业</p>
          </div>
          <div class="list">
            <img src="@/assets/image/employment/icon-three.png" alt="">
            <p>文体活动</p>
          </div>
          <div class="list">
            <img src="@/assets/image/employment/icon-four.png" alt="">
            <p>康复科普</p>
          </div>
          <div class="list">
            <img src="@/assets/image/employment/icon-five.png" alt="">
            <p>生活维权</p>
          </div>
          <div class="list">
            <img src="@/assets/image/employment/icon-six.png" alt="">
            <p>在线商城</p>
          </div>
        </div> -->
      </div>
    </div>
    <BindingPhone ref="BindingPhone" :data="data" />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
import BindingPhone from '@/components/popup/register/BindingPhone'
export default {
  components:{
    BindingPhone
  },
  data() {
    return {
      flag: false,
      imgUrl: require("@/assets/image/pagint.png"),
      tabIndex: 1,
      newsList: [],
      SpreadList: [],
      dotPosition: "left",
      bannerList: [], // 轮播图列表
      naticeList: [], // 通知公告列表
      swiperOptions: {
        loop: true,
        speed: 1500,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          //type: 'fraction',
          //type : 'progressbar',
          //type : 'custom',
        },
        onLoading: false,
        // Some Swiper option/callback...
      },
      data:{}
    };
  },
  created() {
    this.getNewsList();
    this.gerBannerList();
    this.getNaticeList();
  },
  mounted(){
    if(this.$route.query.code && this.$route.query.state){
      this.$ajax({
        url:"/authority/user/pc/wx/login/callback?code="+this.$route.query.code+ "&state="+this.$route.query.state ,
        method:"post",
        params:{
          
        }
      }).then((res)=>{
        if(res.code == 200){
          if(res.data.token){
            this.$store.commit('changelocalImgFlag',res.data.localImgFlag);
            this.$store.commit('changenickName',res.data.userinfo.nickName);
            this.$store.commit('changeresumeNo',res.data.userinfo.resumeNo);
            this.$store.commit('changepwdFlag',res.data.pwdFlag);
            this.$store.commit('changeroleType',res.data.userinfo.roleType);
            this.$store.commit('changemobile',res.data.userName);
            this.$store.commit('changepicture',res.data.userinfo.picture);
            this.$store.commit('changeToken',res.data.token);
            this.$store.commit('changeuserName',res.data.userName);
            localStorage.setItem('rememberPassword',false);
            localStorage.setItem('userName','');
            localStorage.setItem('password','');
          }else{
            this.data = res.data;
            this.$refs['BindingPhone'].visible = true;
          }
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  },
  methods: {
    setCookie() {
      setCookie("SESSION", " ", -1);
    },
    // 便民入口跳转外链
    JumpOutside(e) {
      window.open(e);
    },
    // 获取轮播图列表
    gerBannerList() {
      this.$ajax({
        url: "/news/banner/banner/list?pageSize=" + 4 + "&pageIndex=" + 1,
        method: "post",
        params: {
          bannerType: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.bannerList = res.data.list;
        }
      });
    },
    // 获取通知公告列表
    getNaticeList() {
      this.$ajax({
        url: "/news/newsmsg/list/notice/home",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.naticeList = res.data;
        }
      });
    },
    // 展开收起
    show(e) {
      this.SpreadList[e].checked = !this.SpreadList[e].checked;
      // console.log(this.SpreadList[e].checked, e);
    },
    // 跳转列表页
    goMallList() {
      if (this.tabIndex == 1) {
        this.$router.push("/NewsList?type=新闻列表&from=2");
      } else if (this.tabIndex == 2) {
        this.$router.push("/NewsList?type=创业列表&from=2");
      } else if (this.tabIndex == 3) {
        this.$router.push("/NewsList?type=科普列表&from=2");
      } else if (this.tabIndex == 4) {
        this.$router.push("/NewsList?type=事件列表&from=2");
      } else if (this.tabIndex == 5) {
        this.$router.push("/NewsList?type=政策解读&from=2");
      }
    },
    // 跳转专栏列表页
    gozhuanlanList(e) {
      this.$router.push("/all/specialColumn?index=" + e);
    },
    // 跳转详情页
    goDetail(flag, id, type, pageId) {
      if (flag) {
        this.$router.push(
          "/details/details?from=1&id=" +
            id +
            "&type=" +
            type +
            "&pageId=" +
            pageId
        );
      }
    },
    goNewsDetail(e, i) {
      this.$router.push(
        "/details/details?from=1&id=" + e + "&type=" + i + "&pageId=首页"
      );
    },
    // tab切换
    tabChange(e) {
      this.flag = false;
      this.tabIndex = e;
      this.newsList = [];
      this.SpreadList = [];
      if (e == 1) {
        this.getNewsList();
      } else if (e == 2) {
        this.getMsginfoList();
      } else if (e == 3) {
        this.getSpreadList();
      } else if (e == 4) {
        this.getlifesafeguardList();
      } else if (e == 5) {
        this.getPoliceFindList();
      }
    },
    // 获取政策库列表
    getPoliceFindList() {
      this.$ajax({
        url: "/news/policyfind/list/home",
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.newsList = res.data;
        } else {
          this.onLoading = false;
        }
      });
    },
    // 获取新闻资讯列表
    getNewsList() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/newsmsg/list/news/home",
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.newsList = res.data;
        } else {
          this.onLoading = false;
        }
      });
    },
    // 获取创业就业列表
    getMsginfoList() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/msginfo/list/home",
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.newsList = res.data;
        } else {
          this.onLoading = false;
        }
      });
    },
    // 获取康复科普列表
    getSpreadList() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/healthspread/home/list?pageSize=4&pageIndex=1",
        method: "post",
        dataType: "JSON",
        params: {},
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.SpreadList = res.data.list;
          this.SpreadList.forEach((value, index) => {
            this.$set(value, "checked", false);
          });
        } else {
          this.onLoading = false;
        }
      });
    },
    // 获取生活维权列表
    getlifesafeguardList() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/lifesafeguard/home/list?pageSize=4&pageIndex=1",
        method: "post",
        dataType: "JSON",
        params: {},
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.SpreadList = res.data.list;
          this.SpreadList.forEach((value, index) => {
            this.$set(value, "checked", false);
          });
        } else {
          this.onLoading = false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
/deep/.bannerList {
  max-height: 800px;
  position: relative;
  .swiper-slide {
    max-width: 100% !important;
    max-height: 800px;
    overflow: hidden;
    div {
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      filter: blur(15px);
      img {
        width: 100%;
        height: 100%;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 800px;
    }
  }
}
/deep/.swiper-pagination {
  position: absolute;
  bottom: 40px;
  left: calc(50% - 50px);
  margin: 0 auto;
  text-align: center;
}
/deep/.swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: #cccccc;
  border-radius: 6px;
  opacity: 0.69;
  margin-right: 16px;
}
/deep/.swiper-pagination-bullet-active {
  background: #ffbe37;
  border-radius: 6px;
  opacity: 1;
  width: 26px;
  height: 11px;
}
/deep/.ant-btn {
  border: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  p {
    color: #ffbe37;
    font-size: 12px;
    line-height: 17px;
  }
  img {
    width: 10px;
    height: 10px;
  }
}
/deep/.ant-carousel {
  margin-top: 7px;
}
// tab切换选中字体加粗
/deep/.ant-tabs-tab-active {
  font-weight: bold;
  font-size: 16px;
}
/deep/.ant-tabs-tab {
  font-size: 16px;
}
/deep/.ant-btn {
  height: 48px;
}
.home {
  background-image: url("~@/assets/image/employment/backimg.png");
  background-size: 100% auto;
  min-height: calc(100vh - 284px);
  background-color: #f8f8f8;
  .announcement {
    width: 100%;
    height: 60px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);
    background-color: #ffffff;
    margin-top: 20px;
    .notice {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      .msg {
        background-color: #ffbe37;
        padding: 4.5px 10px 1px;
        height: 25px;
        text-align: center;
        transform: skewX(-25deg);
      }
      .msg > div {
        color: #232d32;
        transform: skewX(25deg);
        font-size: 12px;
        font-weight: bold;
        line-height: 17px;
        white-space: nowrap;
      }
      .ant-carousel {
        padding-left: 16px;
        // flex: 1;
        display: flex;
        align-items: bottom;
        // margin-top: 3px;
        .slick-list {
          height: 30px !important;
        }
        p {
          line-height: 30px;
          color: #333333;
          font-size: 16px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }
      .mall {
        width: 50px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;
        p {
          color: #333333;
          font-size: 16px;
          font-weight: bold;
          line-height: 22px;
          white-space: nowrap;
        }
        img {
          width: 20px;
          height: 20px;
          margin-top: -2px;
        }
      }
    }
  }
  .content {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    .leftcontent {
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);
      width: 840px;
      // 780  无图片宽度
      min-height: 777px;
      padding-top: 10px;
      padding-left: 24px;
      padding-right: 20px;
      background-color: #ffffff;
      .titleList {
        li {
          border-bottom: 1px solid #eeeeee;
          cursor: pointer;
          padding: 27px 24px;
          background-color: #ffffff;
          margin-right: 20px;
          position: relative;
          .title {
            color: #333333;
            font-size: 18px;
            font-weight: bold;
            line-height: 18px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .contenttext {
            margin-top: 16px;
            color: #999999;
            font-size: 15px;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /*行数*/
            -webkit-box-orient: vertical;
          }
          .time {
            color: #333333;
            font-size: 14px;
            line-height: 14px;
            margin-top: 16px;
          }
          .contentactive {
            -webkit-line-clamp: 10000;
          }
          div {
            position: absolute;
            bottom: 10px;
            right: 20px;
            .show {
              position: absolute;
              right: 0;
              width: 115px;
              padding-left: 25px;
              bottom: 3px;
              background: #ffffff;
              display: flex;
              cursor: pointer;
              p {
                color: #0d4fae;
                font-size: 15px;
                line-height: 21px;
              }
              img {
                width: 20px;
                margin-left: 4px;
              }
            }
          }
        }
      }
      .messages {
        width: 796px;
        li {
          cursor: pointer;
          // width: 100%;
              border-bottom: 1px solid #eeeeee;
          // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
          display: flex;
          background-color: #ffffff;
          padding: 27px 24px;
          .leftimg {
            width: 196px;
            height: 120px;
            padding-right: 32px;
          }
          .rightCont {
            flex: 1;
            // padding: 0 18px 0 0;
            .top {
              display: flex;
              padding-top: 5px;
              align-items: center;
              .titlenav {
                background-color: #ffbe37;
                padding: 2.5px 10px 1px;
                height: 23px;
                text-align: center;
                transform: skewX(-25deg);
                margin-right: 12px;
              }

              .titlenav > div {
                color: #232d32;
                transform: skewX(25deg);
                font-size: 12px;
                font-weight: bold;
                line-height: 17px;
              }
              // .titlenav{
              //
              //   color: #FB6D00;
              //   border: 1px solid #fb6d00;
              //   font-size: 12px;
              //   line-height: 17px;
              //
              // }
              .messTitle {
                flex: 1;
                color: #333333;
                font-size: 18px;
                line-height: 25px;
                font-weight: bold;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
              }
            }
            .navmsg {
              margin-top: 8px;
              display: flex;
              p {
                margin-right: 56px;
                color: #666666;
                font-size: 13px;
                line-height: 18px;
              }
            }
            .contents {
              // width: 100%;
              margin-top: 16px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              color: #000000;
              font-size: 15px;
              line-height: 21px;
            }
          }
        }
        li:last-child {
          border: 0;
          margin-bottom: 0;
        }
      }
    }
    .rightcontent {
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);
      width: 340px;
      min-height: 777px;
      background-color: #ffffff;
      .haveMall {
        background-image: url("~@/assets/image/mallback.jpg");
        background-size: 100% 100%;
      }
      .rightTitle {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #232d32;
        justify-content: space-between;
        padding: 0 24px 0 16px;
        .title {
          display: flex;
          align-items: center;
          img {
            width: 18px;
            height: 18px;
            margin-right: 8px;
          }
          p {
            color: #ffffff;
            font-size: 14px;
            line-height: 20px;
            font-weight: bold;
          }
        }
        .mall {
          cursor: pointer;
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 12px;
          p {
            margin-right: 5px;
            font-size: 12px;
            font-weight: bold;
          }
          i {
            // margin-top: -2px;
          }
        }
      }
      .cah {
        cursor: pointer;
        width: 316px;
        height: 88px;
        margin: 0 auto;
        margin-top: 16px;
        background-image: url("~@/assets/image/employment/cah-1.png");
        background-size: 100% 100%;
        // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      }
      .cah:hover {
        background-image: url("~@/assets/image/employment/cah-2.png");
      }
      .zqfc {
        cursor: pointer;
        width: 316px;
        height: 88px;
        margin: 0 auto;
        margin-top: 12px;
        background-image: url("~@/assets/image/employment/zqfc-1.png");
        background-size: 100% 100%;
      }
      .zqfc:hover {
        background-image: url("~@/assets/image/employment/zqfc-2.png");
      }
      .zczg {
        cursor: pointer;
        width: 316px;
        height: 88px;
        margin: 0 auto;
        margin-top: 12px;
        margin-bottom: 24px;
        background-image: url("~@/assets/image/employment/zczg-1.png");
        background-size: 100% 100%;
      }
      .zczg:hover {
        background-image: url("~@/assets/image/employment/zczg-2.png");
      }
      .convenient {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .list {
          width: 50%;
          height: 147px;
          cursor: pointer;
          // overflow: hidden;
          .inline {
            padding: 0 16px;
            transition: all 0.3s linear 0s;
            margin-top: 50px;
            color: #000;
            display: flex;
            flex-direction: column;
            text-align: center;
            img {
              width: 38px;
              height: 38px;
              display: block;
              margin: 0 auto;
            }
            .title {
              color: #333333;
              font-size: 14px;
              line-height: 20px;
            }
            .englishTit {
              color: #999999;
              font-size: 12px;
              line-height: 17px;
            }
            .linkName {
              margin-top: 8px;
              color: #ffffff;
              font-size: 12px;
              line-height: 17px;
              transition: all 0.3s linear 0s;
            }
          }
        }
        .list:hover {
          .inline {
            margin-top: 30px;
            img {
              transform: rotatey(1turn);
              transition: 0.6s;
            }
            .linkName {
              color: #333333;
            }
          }
        }
      }
      .entrance {
        padding: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .list {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 56px;
          margin-right: 46px;
          margin-bottom: 40px;
          transition: all 0.2s;
          img {
            width: 38px;
            height: 38px;
          }
          p {
            color: #333333;
            font-size: 14px;
            margin-top: 8px;
            line-height: 20px;
          }
        }
        .list:nth-child(3n) {
          margin-right: 0;
        }
        .list:hover {
          -webkit-animation: slide-top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
          animation: slide-top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }
        @-webkit-keyframes slide-top {
          0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
          100% {
            -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
          }
        }
        @keyframes slide-top {
          0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
          100% {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
          }
        }
      }
    }
  }
}

.listDiv1 {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  padding: 17px 24px;
  .title {
    color: #232d32;
    font-size: 18px;
    font-weight: bold;
    line-height: 27px;
  }
  .contents {
    margin-top: 10px;
    color: #232d32;
    font-size: 13px;
    font-weight: Normal;
    line-height: 20px;
  }
}
</style>
